<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 模板字符串：` `

        // 在JS中我们定义字符串的方式： 单引号 ' '、 双引号 " "、 反单引号 ` `
        // 1 基本使用
        let str1 = "Hello \" World!";  // 双引号中出现双引号需要转义\
        let str2 = 'Hello \'World!';   // 单引号中出现单引号需要转义\
        let str3 = `Hello " '\` World!`;
        console.log(str1, str2, str3);

        // 2. 关于换行问题：
        //  单引号和双引号不支持直接换行，需要反斜线 \， 
        //  而反单引号不需要,直接支持换行
        let s1 = "asdfqwefas\
        dfasdsbwtbdf";
        console.log(s1);

        // 直接支持换行
        let s2 = `fiqjwelfi
        uqeofjaldk
        jfasdf`;
        console.log(s2);

        // 3. 反单引号定义的字符串支持变量输出，需要使用 ${变量} 嵌入
        let url = "https://www.baidu.com";
        let title = "百度";
        // 要求使用上面两个变量拼成一个超链接
        let link1 = '<a href="' + url + '">' + title + '</a>';
        console.log(link1);

        // 使用 反单引号（模板字符串） 后
        let link2 = `<a href="${url}">${title}</a>`;
        console.log(link2);
    </script>
</body>
</html>